<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>支付记录查询</title>
  <script src="/js/vue.js"></script>
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <script src="/js/index.js"></script>
  <script src="/js/axios.min.js"></script>
  <style>
    /* 详情表单样式优化 */
    .detail-form .el-form-item {
      margin-bottom: 16px;
    }
    /* 文本溢出省略样式 */
    .text-ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 支付记录查询卡片 -->
  <el-card shadow="hover" style="margin: 10px;">
    <!-- 搜索区域 -->
    <el-row :gutter="10" style="margin-bottom: 10px;">
      <el-col :span="4">
        <el-select size="mini" v-model="searchForm.payResult" placeholder="支付结果">
          <el-option label="成功" value="0"></el-option>
          <el-option label="失败" value="1"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-date-picker size="mini" v-model="searchForm.payTime" type="date" placeholder="支付时间"></el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-button size="mini" icon="el-icon-search" type="primary" @click="search">搜索</el-button>
        <el-button size="mini" type="default" @click="resetSearch">重置</el-button>
      </el-col>
    </el-row>

    <!-- 支付记录表格 -->
    <el-table :data="tableData" border stripe style="width: 100%" empty-text="暂无支付记录数据">
      <el-table-column prop="payId" label="支付ID" width="80"></el-table-column>
      <el-table-column prop="orderNo" label="关联订单号" min-width="140">
        <template slot-scope="scope">
          <el-link type="primary" @click="goToOrderDetail(scope.row.orderNo)" style="cursor: pointer">
            {{ scope.row.orderNo }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="paySerialno" label="支付流水号" min-width="160"></el-table-column>
      <el-table-column prop="payPje" label="支付金额(元)" width="120">
        <template slot-scope="scope">{{ scope.row.payPje ? scope.row.payPje.toFixed(2) : '0.00' }}</template>
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="180"></el-table-column>
      <el-table-column prop="payRespcode" label="支付响应码" width="120"></el-table-column>
      <el-table-column prop="payResult" label="支付结果" width="120">
        <template slot-scope="scope">
          <el-tag :type="getPayResultTagType(scope.row.payResult)">
            {{ getPayResultText(scope.row.payResult) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payFullmsg" label="支付详情" min-width="200">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.payFullmsg || '无详情'" placement="top">
            <div class="text-ellipsis">{{ scope.row.payFullmsg || '无详情' }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="margin-top: 10px; text-align: right;">
    </el-pagination>
  </el-card>

  <!-- 支付详情弹窗 -->
  <el-dialog :title="`支付详情 - ID: ${detailForm.payId || ''}`" :visible.sync="detailDialogVisible" width="60%">
    <el-form :model="detailForm" label-width="160px" class="detail-form">
      <el-form-item label="支付ID">
        <span>{{ detailForm.payId || '无' }}</span>
      </el-form-item>
      <el-form-item label="关联订单号">
        <el-link type="primary" @click="goToOrderDetail(detailForm.orderNo)" style="cursor: pointer">
          {{ detailForm.orderNo || '无' }}
        </el-link>
      </el-form-item>
      <el-form-item label="支付流水号">
        <span>{{ detailForm.paySerialno || '无' }}</span>
      </el-form-item>
      <el-form-item label="支付金额">
        <span>{{ detailForm.payPje ? detailForm.payPje.toFixed(2) + ' 元' : '0.00 元' }}</span>
      </el-form-item>
      <el-form-item label="支付时间">
        <span>{{ detailForm.payTime || '无' }}</span>
      </el-form-item>
      <el-form-item label="支付响应码">
        <span>{{ detailForm.payRespcode || '无' }}</span>
      </el-form-item>
      <el-form-item label="支付结果">
        <el-tag :type="getPayResultTagType(detailForm.payResult)">
          {{ getPayResultText(detailForm.payResult) }}
        </el-tag>
      </el-form-item>
      <el-form-item label="支付完整信息">
        <el-input
                v-model="detailForm.payFullmsg"
                type="textarea"
                rows="6"
                disabled
                placeholder="无支付完整信息"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="detailDialogVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</div>

<script>
  // 日期格式化工具函数
  function formatDate(date) {
    if (!date) return '';
    const d = new Date(date);
    let month = '' + (d.getMonth() + 1);
    let day = '' + d.getDate();
    let hour = '' + d.getHours();
    let minute = '' + d.getMinutes();
    let second = '' + d.getSeconds();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    if (hour.length < 2) hour = '0' + hour;
    if (minute.length < 2) minute = '0' + minute;
    if (second.length < 2) second = '0' + second;

    return `${d.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`;
  }

  new Vue({
    el: '#app',
    data() {
      return {
        // 表格数据相关
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        // 搜索表单
        searchForm: {
          payId: '',
          orderNo: '',
          paySerialno: '',
          payResult: '',
          payTime: ''
        },
        // 详情弹窗相关
        detailDialogVisible: false,
        detailForm: {}
      }
    },
    created() {
      // 页面加载时默认加载第一页数据
      this.loadPayData();
    },
    methods: {
      // 加载支付记录数据
      loadPayData() {
        // 构建搜索参数（处理日期格式）
        const searchParams = {
          ...this.searchForm,
          payTime: this.searchForm.payTime ? formatDate(this.searchForm.payTime) : ''
        };

        // 调用分页查询接口
        axios.post('/pay/queryByPage', {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          data: searchParams
        })
                .then(res => {
                  if (res.data.code === 200) {
                    this.tableData = res.data.data.list || [];
                    this.total = res.data.data.total || 0;
                  } else {
                    this.$message.error('加载支付记录失败：' + (res.data.message || '接口返回异常'));
                  }
                })
                .catch(err => {
                  console.error('加载支付记录异常：', err);
                  this.$message.error('网络错误或接口不可用');
                });
      },

      // 分页大小变更
      handleSizeChange(val) {
        this.pageSize = val;
        this.loadPayData();
      },

      // 当前页码变更
      handleCurrentChange(val) {
        this.currentPage = val;
        this.loadPayData();
      },

      // 搜索按钮点击事件
      search() {
        this.currentPage = 1; // 重置为第一页
        this.loadPayData();
      },

      // 重置搜索表单
      resetSearch() {
        this.searchForm = {
          payId: '',
          orderNo: '',
          paySerialno: '',
          payResult: '',
          payTime: ''
        };
        this.currentPage = 1;
        this.loadPayData();
      },

      // 查看支付详情
      viewPayDetail(row) {
        this.detailForm = JSON.parse(JSON.stringify(row));
        this.detailDialogVisible = true;
      },

      // 跳转到订单详情页（需根据实际订单页面路径调整）
      goToOrderDetail(orderNo) {
        if (!orderNo) return;
        // 此处假设订单详情页路径为order.html，通过URL参数传递订单号
        window.open(`/order.html?orderNo=${orderNo}`, '_blank');
      },

      // 获取支付结果标签类型（用于表格和详情弹窗）
      getPayResultTagType(payResult) {
        // 1成功，0失败
        return payResult === '1' ? 'success' : 'danger';
      },

      // 获取支付结果文本（处理空值和枚举映射）
      getPayResultText(payResult) {
        // 1成功，0失败
        return payResult === '1' ? '成功' : (payResult === '0' ? '失败' : '未明确');
      }
    }
  })
</script>
</body>
</html>